---
title: SafeAreaView | gluestack-ui

description: Component to ensure that your content is displayed within the safe area of a device screen. The safe area refers to the portion of the screen that is visible and not obstructed by device-specific elements like notches, status bars, and rounded corners. This is particularly important on modern smartphones, where screens may have irregular shapes or include areas that are not fully usable for displaying content.
---

import { Meta } from '@storybook/addon-docs';

<Meta title="ui/Components/React Native Components/SafeAreaView" />

# SafeAreaView
 
Following is the default implementation of the **SafeAreaView** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component.

> Note: SafeAreaView component is only applicable to iOS devices with iOS version 11 or later.

<iframe
  src="https://snack.expo.dev/embedded/@gluestack/safeareaview-example-gluestack-ui?iframeId=o8ckls5o1n&preview=true&platform=ios&theme=dark"
  style={{ width: '100%', height: '60vh', border: '0px' }}
/>

<br />

> Note: You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/SafeAreaView/styled-components) to learn about default styling of SafeAreaView component

### Import

To use this component in your project, include the following import statement in your file.

```bash
import { SafeAreaView } from '@gluestack-ui/themed';
```

### Anatomy

The structure provided below can help you identify and understand a SafeAreaView component's various parts.

```jsx
export default () => <SafeAreaView />;
```

### API Reference

The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.

### SafeAreaView

It inherits all the properties of React Native's [SafeAreaView](https://reactnative.dev/docs/SafeAreaView) component. 
